<template>
  <view class="upgrade-popup">
    <image class="header-bg" src="./upgrade_bg.png" mode="widthFix"></image>
    <view class="main">
      <view class="version">发现新版本{{ versionName }}</view>
      <view class="content">
        <text class="title">更新内容</text>
        <view class="desc" v-html="versionDesc"></view>
      </view>
      <!--下载状态-进度条显示 -->
      <view class="footer" v-if="isStartDownload">
        <view class="progress-view" :class="{'active':!hasProgress}" @click="handleInstallApp">
          <!-- 进度条 -->
          <view v-if="hasProgress" style="height: 100%;">
            <view class="txt">{{ percentText }}</view>
            <view class="progress" :style="setProStyle"></view>
          </view>
          <view v-else>
            <view class="btn upgrade force">{{ isDownloadFinish ? '立即安装' : '下载中...' }}</view>
          </view>
        </view>
      </view>
      <!-- 强制更新 -->
      <view class="footer" v-else-if="isForceUpdate">
        <view class="btn upgrade force" @click="handleUpgrade">{{ platform === 'ios' ? '去用商店' : '立即更新' }}</view>
      </view>
      <!-- 可选择更新 -->
      <view class="footer" v-else>
        <view class="btn close" @click="handleClose">以后再说</view>
        <view class="btn upgrade" @click="handleUpgrade">{{ platform === 'ios' ? '去用商店' : '立即更新' }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  downloadApp,
  installApp
} from './upgrade.js'

export default {
  data() {
    return {
      isForceUpdate: false, //是否强制更新
      versionName: '', //版本名称
      versionDesc: '', //更新说明
      downloadUrl: '', //APP下载链接
      isDownloadFinish: false, //是否下载完成
      hasProgress: false, //是否能显示进度条
      currentPercent: 0, //当前下载百分比
      isStartDownload: false, //是否开始下载
      fileName: '', //下载后app本地路径名称
      platform: uni.getSystemInfoSync().platform //手机平台
    }
  },
  computed: {
    //设置进度条样式，实时更新进度位置
    setProStyle() {
      return {
        width: (510 * this.currentPercent / 100) + 'rpx' //510：按钮进度条宽度
      }
    },
    //百分比文字
    percentText() {
      let percent = this.currentPercent;
      if (typeof percent !== 'number' || isNaN(percent)) return '下载中...'
      if (percent < 100) return `下载中${percent}%`
      return '立即安装'

    }
  },

  onBackPress(options) {
    // 禁用返回
    if (options.from === 'backbutton') {
      return true;
    }

  },
  created() {
    uni.$on('upgrade-app', this.bindEmit)
  },
  beforeDestroy() {
    uni.$off('upgrade-app', this.bindEmit)
  },
  methods: {
    bindEmit(e) {
      let {name, content, url, forceUpdate} = e
      this.isForceUpdate = forceUpdate
      this.versionName = name
      this.versionDesc = content
      this.downloadUrl = url
    },
    getUrl() {
      const packageName = 'uni.zhoubiangou'
      let toUrl = ''
      let miAppStoreUrl = "mimarket://details?id=" + packageName;
      let samsungAppStoreUrl = "samsungapps://ProductDetail/" + packageName;
      let huaweiAppStoreUrl = "appmarket://details?id=" + packageName;
      let oppoAppStoreUrl = "oppomarket://details?packagename=" + packageName;
      let vivoAppStoreUrl = "vivomarket://details?id=" + packageName;
      let platform = uni.getSystemInfoSync() //手机平台
      if (platform.deviceBrand.toLowerCase().includes("xiaomi")) {
        toUrl = miAppStoreUrl
      }
      if (platform.deviceBrand.toLowerCase().includes("samsung")) {
        toUrl = samsungAppStoreUrl
      }
      if (platform.deviceBrand.toLowerCase().includes("huawei")) {
        toUrl = huaweiAppStoreUrl
      }
      if (platform.deviceBrand.toLowerCase().includes("oppo")) {
        toUrl = oppoAppStoreUrl
      }
      if (platform.deviceBrand.toLowerCase().includes("vivo")) {
        toUrl = vivoAppStoreUrl
      }
      return toUrl
    },
    //更新
    handleUpgrade() {
      let platform = uni.getSystemInfoSync().platform //手机平台
      if (platform === 'ios') {
        const appid = "id1671964876"; // 在App Store中的应用ID
        const url = `itms-apps://itunes.apple.com/cn/app/id${appid}?mt=8`
        plus.runtime.launchApplication({
          action: url
        }, function (e) {
          console.log('Open system default browser failed: ' + e.message);
          uni.showToast({title: "打开应用商店失败，请手动打开应用商店更新APP", icon: "none", duration: 3000})
        });
        return
      }
      const that = this
      // plus.runtime.openURL(this.getUrl(), function (error) {
      //   console.log("打开小米应用商店失败: " + error.message);
        // uni.showToast({title: "打开应用商店失败，执行本地下载", icon: "none", duration: 3000})
        if (that.downloadUrl) {
          that.isStartDownload = true
          //开始下载App
          downloadApp(that.downloadUrl, current => {
            //下载进度监听
            that.hasProgress = true
            that.currentPercent = current
          }).then(fileName => {
            //下载完成
            that.isDownloadFinish = true
            that.fileName = fileName
            if (fileName) {
              //自动安装App
              that.handleInstallApp()
            }
          }).catch(e => {
            console.log(e, 'e')
            uni.showToast({
              title: '下载失败，请手动打开应用商店更新APP',
              icon: 'none',
              duration: 3000
            })
          })
        } else {
          uni.showToast({
            title: '下载失败，请手动打开应用商店更新APP',
            icon: 'none',
            duration: 3000
          })
        }
      // });
    },
    //安装app
    handleInstallApp() {
      //下载完成才能安装，防止下载过程中点击
      if (this.isDownloadFinish && this.fileName) {
        installApp(this.fileName, () => {
          //安装成功,关闭升级弹窗
          uni.navigateBack()
        })
      }
    },
    //关闭返回
    handleClose() {
      uni.navigateBack()
    },
  }
}
</script>

<style>
page {
  background: rgba(0, 0, 0, 0.5); /**设置窗口背景半透明*/
}
</style>
<style lang="scss" scoped>
.upgrade-popup {
  width: 580rpx;
  height: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 20rpx;
  box-sizing: border-box;
  border: 1px solid #eee;
}

.header-bg {
  width: 100%;
  margin-top: -112rpx;
}

.main {
  padding: 10rpx 30rpx 30rpx;
  box-sizing: border-box;

  .version {
    font-size: 36rpx;
    color: #FC754A;
    font-weight: 700;
    width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 1px;
  }

  .content {
    margin-top: 60rpx;

    .title {
      font-size: 28rpx;
      font-weight: 700;
      color: #000000;
    }

    .desc {
      box-sizing: border-box;
      margin-top: 20rpx;
      font-size: 28rpx;
      color: #6A6A6A;
      max-height: 40vh;
      overflow-y: auto;
    }
  }

  .footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    margin-top: 100rpx;

    .btn {
      width: 246rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 999;
      height: 96rpx;
      box-sizing: border-box;
      font-size: 32rpx;
      border-radius: 10rpx;
      letter-spacing: 2rpx;

      &.force {
        width: 500rpx;
      }

      &.close {
        border: 1px solid #E0E0E0;
        margin-right: 25rpx;
        color: #000;
      }

      &.upgrade {
        background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
        color: white;
      }
    }

    .progress-view {
      width: 510rpx;
      height: 90rpx;
      display: flex;
      position: relative;
      align-items: center;
      border-radius: 6rpx;
      background-color: #dcdcdc;
      display: flex;
      justify-content: flex-start;
      padding: 0;
      box-sizing: border-box;
      border: none;
      overflow: hidden;

      &.active {
        background-color: #FC754A;
      }

      .progress {
        height: 100%;
        background-color: #FC754A;
        padding: 0;
        box-sizing: border-box;
        border: none;
        border-top-left-radius: 10rpx;
        border-bottom-left-radius: 10rpx;

      }

      .txt {
        font-size: 28rpx;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
      }
    }
  }
}
</style>